import "./index.less";
import CONFIG from "./../../config";
import {Link} from "react-router";
let Item = React.createClass({

    propTypes: {
        onClick: React.PropTypes.func,
        items: React.PropTypes.array,
        label: React.PropTypes.string,
        active: React.PropTypes.string,
        icon: React.PropTypes.string,
    },
    getInitialState: function () {
        return {
            active: ''
        };
    },

    _clickHandler(){
        if (this.props.items) {
            this.setState({active: this.state.active ? '' : 'active'})
        }
    },

    render(){
        if (this.props.items) {
            var props = this.props, active_ = '';
            var subs = props.items.map(function (item) {
                if (props.active == item.label) {
                    active_ = 'active';
                }
                return (
                    <Link onClick={props.onClick} to={item.url } key={item.label}
                          className={'item ' + (props.active == item.label ? 'active' : '')}>
                        <span> {item.label}</span>
                    </Link>
                );
            });
            return (
                <div className={"menu-item " + ((active_ || this.state.active) ? 'active' : '')}
                     onClick={()=> {
                         this._clickHandler()
                     }}
                     style={{height: (active_ || this.state.active) ? 'auto' : '40px'}}>
                    <a href="javascript:void(0)"
                       className={'item ' + (active_)}>
                        <i className={'fa fa-' + this.props.icon}></i>
                        <span> {this.props.label}</span>
                        <i className="fr fa fa-plus"></i>
                    </a>
                    <div className="subs">
                        {subs}
                    </div>
                    <div className="float-menu" style={{display: 'none', top: '0'}}>
                        <a href="javascript:void(0)"
                           className={'item ' + (active_)}>
                            <i className={'fa fa-' + this.props.icon}></i>
                            <span> {this.props.label}</span>
                            <i className="fr fa fa-plus"></i>
                        </a>
                        <div className="subs">
                            {subs}
                        </div>
                    </div>
                </div>
            );
        } else {
            return (
                <div className="menu-item">
                    <Link to={this.props.url} onClick={this.props.onClick}
                          className={'item ' + (this.props.active == this.props.label ? 'active' : '')}>
                        <i className={'fa fa-' + this.props.icon}></i>
                        <span> {this.props.label}</span>
                    </Link>
                    <div className="float-menu" style={{display: 'none', top: '0'}}>
                        <Link to={this.props.url} onClick={this.props.onClick}
                              className={'item ' + (this.props.active == this.props.label ? 'active' : '')}>
                            <i className={'fa fa-' + this.props.icon}></i>
                            <span> {this.props.label}</span>
                        </Link>
                    </div>
                </div>
            );
        }
    }
});

export default class Nav extends React.PureComponent {
    constructor(props) {
        super(props);
        const Menus = [
            {
                label: '首页',
                url: CONFIG.MENUS.HOME,
                icon: 'home',
            },
            {
                label: '发布新闻',
                icon: 'newspaper-o',
                items: [
                    {
                        label: '新闻列表',
                        url: CONFIG.MENUS.NEWS,
                    },
                    {
                        label: '分类目录',
                        url: CONFIG.MENUS.NEWS_CATEGORY,
                    }
                ]
            },
            {
                label: '发布活动',
                icon: 'hdd-o',
                items: [
                    {
                        label: '活动列表',
                        url: CONFIG.MENUS.ACTIVITIES
                    },
                    {
                        label: '活动分类',
                        url: CONFIG.MENUS.ACTIVITIES_CATEGORY
                    }
                ]
            },
            {
                label: '发布通知',
                icon: 'volume-up',
                items: [
                    {
                        label: '通知列表',
                        url: CONFIG.MENUS.NOTICES
                    },
                    {
                        label: '通知分类',
                        url: CONFIG.MENUS.NOTICES_CATEGORY
                    }
                ]
            },
            {
                label: '班级信息',
                icon: 'graduation-cap',
                items: [
                    {
                        label: '班级简介',
                        url: CONFIG.MENUS.CLASS_PROFILE
                    },
                    {
                        label: '班级荣誉',
                        url: CONFIG.MENUS.CLASS_HONOUR
                    },
                    {
                        label: '班级相册',
                        url: CONFIG.MENUS.CLASS_PHOTOS
                    },
                    {
                        label: '任课老师',
                        url: CONFIG.MENUS.CLASS_TEACHERS
                    },
                    {
                        label: '学生管理',
                        url: CONFIG.MENUS.CLASS_STUDENTS
                    },
                ]
            },
            {
                label: '发布作业',
                url: CONFIG.MENUS.HOMEWORK,
                icon: 'wpforms',
            },
            {
                label: '教学计划',
                url: CONFIG.MENUS.TEACH_SCHEDULE,
                icon: 'calendar',
            },
            {
                label: '每日一新',
                url: CONFIG.MENUS.DAY_NEWS,
                icon: 'star',
            },
            {
                label: '课程表',
                url: CONFIG.MENUS.CLASS_SCHEDULE,
                icon: 'file-text',
            },
            {
                label: '模板管理',
                url: CONFIG.MENUS.TEMPLATES,
                icon: 'map-o',
            },
        ];

        var current = window.location.pathname.slice(1);
        Menus.forEach((item)=> {
            if (item.items) {
                item.items.forEach((item1) => {
                    if (item1.url == current) {
                        current = item1.label;
                    }
                })
            } else {
                if (item.url == current) {
                    current = item.label;
                }
            }
        });
        this.state = {
            Menus: Menus,
            active: this.props.selected || current || '首页',
            hoverTop: 0,
            inner: '',
        };
        this._handlerClick = this._handlerClick.bind(this);
    }

    _handlerClick() {
        // this.setState({active: '首页'});
    }

    // _mouseEnter(e) {
    //     this.setState({hoverTop: e.target.offsetTop, inner: e.currentTarget.innerHTML})
    // }

    render() {
        const Menus = this.state.Menus;
        const active_ = this.state.active, self = this;
        return <div className="menu_left" style={{height: window.innerHeight}}>
            <div className="brand" style={{}}>
                <span>智能发布系统</span>
                <img src={require('./../../../imgs/logo_icon.png')} alt=""
                     style={{position: 'relative', top: '2px', left: '-5px'}}/>
            </div>

            {Menus.map(function (item) {
                item.active = active_;
                return <Item onClick={self._handlerClick} key={item.label}  {...item} />
            })}
        </div>
    }
}
Nav.propTypes = {
    selected: React.PropTypes.string,
}